<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="xx,xx,xx" />
    <meta name="description" content="yyyyyyy" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="70003766576320416375" />
    <meta name="format-detection" content="telephone=no">
    <title>银行卡</title>
    <link rel="stylesheet" href="../css/base/jquery-ui-1.10.3.css" type="text/css">
    <link rel="stylesheet" href="../plugin/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/job.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  <style>
      body,html{
          height: 100%;
      }
      .container-fluid{
          height: 100%;
      }
      .card-box{
          height: 120px;
          border-radius: 4px;
          max-width: 95%;
          background: url(../images/agricultural-bank-card.png) 95% no-repeat #009883;
          background-size:contain;
          -webkit-background-size:contain;
          -moz-background-size:contain;
          -o--webkit-background-size:contain;
          padding: 10px;
          margin: 10px auto;
          position: relative;
      }
      .card-box:nth-child(2){
          background: url(../images/agricultural-bank-card.png) center no-repeat #ebe9e7;
          background-size:contain!important;
          -webkit-background-size:contain!important;
          -moz-background-size:contain!important;
          -o--webkit-background-size:contain!important;
          text-align:center;
          font-size: 18px;
          font-weight: 700;

      }
      .card-box h6{
          font-size: 25px;
          margin-top: 30px;
          color: white;
      }
      .add-card{
          height: 40px;
          background: #545252;
          line-height: 35px;
          padding: 0 10px;
          width: 100%;
          font-size: 20px;
          color: lavender;
      }
  </style>
</head>
<body>
<div class="container-fluid" style="background-color:#403f3f">
    <!--header start-->
    <div class="row header">
      <div><span id="back" class="glyphicon  glyphicon-chevron-left" style="float: left;cursor: pointer;"></span>银行卡</div>
    </div>
        <!--header end-->

    <!--content start-->
    <div class="row content">
             <div class="card-box">
                <img src="../images/agricultural-bank-logo.png" height="40" width="170">
                 <h6>**** **** **** 4572</h6>
             </div>
        <div class="card-box">
            <p style="margin-top: 40px"> 您还没有添加银行卡，赶快去添加吧！</p>
        </div>
          <div class="add-card ">
              <a href="add-card0.html" style="color: white"><span ><b style="font-size: 30px">+</b>添加银行卡</span>
              <span class="glyphicon  glyphicon-chevron-right" style="float: right;line-height: 2"></span>
              </a>
          </div>
    </div>
    <!--content end-->


</div>
<!--<div style="position: relative">-->
    <!--<a class="btn" id="send-evaluate">发布评价</a>-->
<!--</div>-->
</body>
<script src="../js/common/jquery-2.1.4.min.js"></script>
<script src="../js/index.js"></script>
<script src="../plugin/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    //判断银行卡是否已添加
    $(function(){
        var idBox1=$('.card-box:nth-child(1)');
        var idBox2=$('.card-box:nth-child(2)');

        if(idBox1.find('h6').text()!==''){
            idBox2.addClass('hidden');
            idBox1.css('display','block');
        }
        else{
            idBox2.removeClass('hidden');
            idBox1.css('display','none');
        }
    });
</script>
</html>